<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>栅格系统</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        .row .row {
            margin-top: 10px;
            margin-bottom: 0;
        }

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>
<body>
<div class="container">
    <!--1.一行最多放12个-->
    <h5>1.一行最多放12个</h5>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>

    <!--2.三列充满一行并且等分-->
    <h5>2.三列充满一行并且等分</h5>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>

    <!--3.三列充满一行并且不等分[保证总和为12]-->
    <h5>3.三列充满一行并且不等分</h5>
    <div class="row">
        <div class="col-md-2">col-md-2</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-6">col-md-6</div>
    </div>

    <!--4.手机端:3列充满一行-->
    <h5>4.手机端3列充满一行并且等分</h5>
    <div class="row">
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
    </div>

    <!--5.兼容不同屏幕,并且不同屏幕展示效果不同-->
    <h5>5.兼容不同屏幕,并且不同屏幕展示效果不同</h5>
    <div class="row">
        <div class="col-xs-4 col-sm-5 col-md-6 col-lg-7">col-**-*</div>
        <div class="col-xs-8 col-sm-7 col-md-6 col-lg-5">col-**-*</div>
    </div>

    <!--6.列的内容宽度超出,宽度并不增加,高度会增加-->
    <h5>6.列的内容宽度超出,宽度并不增加,高度会增加</h5>
    <div class="row">
        <div class="col-xs-4 col-sm-5 col-md-6 col-lg-7">good good study,day day up!good good study,day day up!good good study,day day up!good good study,day day up!good good study,day day up!good good study,day day up!good good study,day day up!</div>
        <div class="col-xs-8 col-sm-7 col-md-6 col-lg-5">col-**-*</div>
    </div>

    <!--7.偏移量的使用-->
    <h5>7.偏移量的使用offset</h5>
    <div class="row">
        <div class="col-xs-4 col-md-4 col-md-offset-6 col-xs-offset-6">eg.宽度占4分,偏移6份</div>
    </div>

    <!--8.嵌套使用-->
    <h5>8.嵌套使用</h5>
    <div class="row">
        <div class="col-md-9">
            col-md-9
            <!--嵌套的时候要写一个新的row-->
            <div class="row">
                <!--嵌套时偏移量offset同样可用-->
                <div class="col-md-9 col-md-offset-2">col-md-9</div>
            </div>
        </div>
    </div>

    <!--9.列的排序-->
    <h5>9.列的排序</h5>
    <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>

</div>
</body>
</html>